<!DOCTYPE html>
<html>
<head>
<style>
#wrap{
     display: flex;  /* 弹性盒模型（定性布局，可以自适应） ,子元素必须沿着父元素主轴排列*/
    justify-content: space-between; /* 描述的是子元素横向排列的方式 */
    width: 515px;
    height: 305px;
    margin: 100px auto;
    border-top: 3px yellow solid;
    border-right: 3px green solid;
    border-bottom: 3px red solid;
    border-left: 3px cornflowerblue solid;
    perspective: 1000px;/* 1.建立一个立体主轴 */
    border-radius: 3%;
}
.wleft{
    background: red;
    width: 200px;
    height: 300px;
   /*  display: inline-block;  行内元素没有宽高 要设置用inline-block*/
   top:5px;
   left: 5px;
}
 .wright{
    width: 260px;
    height: 260px;
    position: relative;
    top:25px;
    left:-38px;
   /*transform: rotateX(30deg); *//* 测试样式效果css效果，通过写JS代码 */
    transform-style: preserve-3d; /* 4.必须绑定一起旋转，否则只旋转投影的图片 */
    transition: 1s;
} 
.wleft>div{
    height: 100px;
}
.tablist1{
    background-image: url("images/l1.jpg");
}
.tablist2{
    background: url("images/l2.jpg") 0 -50px; 
}
.tablist3{
    background-image: url("images/l3.jpg");
}
.conntent1{
    position: absolute;
    height: 260px;
    width:260px;
    background: url("images/l4.JPG") ;
    transform: rotateX(90deg); /* 2.向上旋转顺时针 ，调整位置*/
    top: -130px;                  /* 2 */
    /* transform: translateY(-150px); 与上面的top是一样的效果*/
}
.conntent2{
    position: absolute;
    height: 260px;
    width: 260px;
    background: url("images/l5.JPG") 0 -30px;
    transform:translateZ(130px);  /* 3搭建模型，参照物向前移动130px。移动参照物，必须相似缩小 */
}
.conntent3{
    position: absolute;
    height: 260px;
    width: 260px;
    background: url("images/l6.JPG");
    transform: rotateX(-90deg); /* 2.向下旋转逆时针，调整位置*/
    top: 130px;                 /* 2 */
    /* transform: translateY(150px); 与上面的top是一样的效果*/
}
#text{
    position: absolute;
    top:50px; 
    left: 500px;
}
</style>
</head>
<body>
    <div id="text">
        <h3>点击立体滚动</h3>
    </div>
<div id="wrap">
    
    <div class="wleft">
        <div class="tablist1"></div>
        <div class="tablist2"></div>
        <div class="tablist3"></div>
    </div>
    <div class="wright">
        <div class="conntent1"></div>
        <div class="conntent2"></div>
        <div class="conntent3"></div>
    </div>
</div>


   
<script>
    (function(){
    var owright=document.querySelector(".wright");
    var tablist1=document.getElementsByClassName("tablist1");
    var tablist2=document.querySelector(".tablist2");
    var tablist3=document.querySelector(".tablist3");
    tablist1[0].onclick=function(){
        owright.style.transform='rotateX(-90deg)';
    }  
  tablist2.onclick=function(){
        owright.style.transform='rotateX(0deg)';
    }  
    tablist3.onclick=function(){
        owright.style.transform="rotateX(90deg)";
    }   
    })()

/* classname用于多个地方，onclick不能直接用，要写好第几个 */
 
/* (function(){
    var index=0;
    var owright=document.querySelector(".wright");
   var classwl=document.querySelector(".wleft");
   var odiv=classwl.getElementsByTagName("div");
    for(var i=0;i<odiv.length;i++){
    odiv[i].a=i;
    odiv[i].onclick=function(){
        if(this.a==0){
            owright.style.transform='rotateX(-90deg)';
        }
        else if(this.a==1){
            owright.style.transform='rotateX(0deg)';
        }
        else{
            owright.style.transform='rotateX(90deg)';
        }
      /*   index=this.a-1;
        var xx=index*90+"deg";
        console.log(xx);
        owright.style.transform="rotateX(xx)"; 
    }
   
}  

})() */
  
 

</script>

</body>
</html>